 <template>
  <div class="tapStyle secondary-page-mode">
     <div class="secondary-toolbar">
          <span>车牌号 : </span>&nbsp;
          <div class="layoutBox" style="width:180px">
              <el-input v-model="input" placeholder="请输入"></el-input>
          </div>&emsp;&emsp;
          <span>所属办事处 : </span>
          <div class="layoutBox" style="width:120px">
            <el-select v-model="value" placeholder="请选择">
                  <el-option
                    v-for="item in optionData"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
            </el-select>
          </div>&emsp;&emsp;
          <el-button @click="search"><i class="iconfont icon-sousuo"></i>查询</el-button>
          <el-button type="delet" @click="visiDialog = true"><i class="iconfont icon-tianjia"></i>新增</el-button>
     </div>
     <div class="currency-mode-wrap">
          <el-table
              :data="tableData"
              border
              style="width: 100%">
              <el-table-column
                type="index"
                :index="indexMethod"
                width="50">
              </el-table-column>
              <el-table-column
                prop="company"
                width="220"
                label="单位">
              </el-table-column>
              <el-table-column
                prop="person"
                label="办事处">
              </el-table-column>
               <el-table-column
                prop="type"
                label="车辆类型">
              </el-table-column>
               <el-table-column
                prop="name"
                label="车辆牌照">
              </el-table-column>
               <el-table-column
                prop="name"
                label="车辆负责人">
              </el-table-column>
              <el-table-column
                prop="name"
                label="联系电话">
              </el-table-column>
               <el-table-column
                prop="name"
                label="使用年限">
              </el-table-column>
               <el-table-column
                prop="name"
                label="车辆品牌">
              </el-table-column>
               <el-table-column
                prop="name"
                label="车辆产地">
              </el-table-column>
               <el-table-column
                prop="name"
                label="状态">
              </el-table-column>
              <el-table-column
              width="190"
                label="操作">
                    <template>
                      <div style="text-align:center">
                            <el-button type="secondBtn" @click="visiDialog = true">编辑</el-button>
                            <el-button type="secondBtn">删除</el-button>
                      </div>
                    </template>
              </el-table-column>
          </el-table>
     </div>
    <el-dialog :visible.sync="visiDialog"  width="635px" title="车辆新增" :before-close="closess">
       <div class="dialogcontent">
             <div class="dialog-layout">
                    <ul  class="formul">
                      <li>
                          <div>
                                <span class="layoutspan">单位 : </span>&nbsp;
                                <div class="layoutBox" style="width:180px">
                                  <el-input v-model="input"></el-input>
                                </div>
                          </div>
                          <div>
                                <span class="layoutspan">所属办事处 : </span>&nbsp;
                                <div class="layoutBox" style="width:180px">
                                  <el-select v-model="value" placeholder="请选择">
                                        <el-option
                                          v-for="item in optionData"
                                          :key="item.value"
                                          :label="item.label"
                                          :value="item.value">
                                        </el-option>
                                  </el-select>
                                </div>
                          </div>
                      </li>
                      <li>
                          <div>
                                <span class="layoutspan">车辆类型 : </span>&nbsp;
                                <div class="layoutBox" style="width:180px">
                                  <el-select v-model="value" placeholder="请选择">
                                        <el-option
                                          v-for="item in optionData"
                                          :key="item.value"
                                          :label="item.label"
                                          :value="item.value">
                                        </el-option>
                                  </el-select>
                                </div>
                          </div>
                          <div>
                                <span class="layoutspan">车辆状态 : </span>&nbsp;
                                <div class="layoutBox" style="width:180px">
                                  <el-select v-model="value" placeholder="请选择">
                                        <el-option
                                          v-for="item in optionData"
                                          :key="item.value"
                                          :label="item.label"
                                          :value="item.value">
                                        </el-option>
                                  </el-select>
                                </div>
                          </div>
                      </li>
                      <li>  
                          <div>
                                <span class="layoutspan">车辆牌照 : </span>&nbsp;
                                <div class="layoutBox" style="width:180px">
                                  <el-input v-model="input"></el-input>
                                </div>
                          </div>
                          <div>
                                <span class="layoutspan">车辆负责人 : </span>&nbsp;
                                <div class="layoutBox" style="width:180px">
                                  <el-input v-model="input"></el-input>
                                </div>
                          </div>
                      </li>
                      <li>
                          <div>
                                <span class="layoutspan">联系电话 : </span>&nbsp;
                                <div class="layoutBox" style="width:180px">
                                  <el-input v-model="input"></el-input>
                                </div>
                          </div>
                          <div>
                                <span class="layoutspan">使用年限 : </span>&nbsp;
                                <div class="layoutBox" style="width:180px">
                                  <el-input v-model="input"></el-input>
                                </div>
                          </div>
                      </li>
                      <li>
                          <div>
                                <span class="layoutspan">车辆品牌 : </span>&nbsp;
                                <div class="layoutBox" style="width:180px">
                                  <el-input v-model="input"></el-input>
                                </div>
                          </div>
                          <div>
                                <span class="layoutspan">车辆产地 : </span>&nbsp;
                                <div class="layoutBox" style="width:180px">
                                  <el-input v-model="input"></el-input>
                                </div>
                          </div>
                      </li>
                    </ul>
             </div>
       </div>
       <div slot="footer" class="dialog-footer">
          <el-button type="noticon" @click="visiDialog = false">保 存</el-button>
          <el-button type="noticonsecondBtn" @click="visiDialog = false">关 闭</el-button>
       </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      dateRange: "",
      visiDialog:false,
      value:'',
      input:'',
      tableData: [{company:'宇星科技发展(深圳)有限公司',person:'',type:'运维车辆'}],
      optionData: [
        { value: 1, label: "水温", standard: "", isShow: true },
        { value: 2, label: "pH", standard: "6~9", isShow: true },
        { value: 3, label: "溶解氧", standard: "≥5", isShow: true },
        { value: 4, label: "电导率", standard: "", isShow: true },
        { value: 5, label: "浊度", standard: "", isShow: true },
        { value: 6, label: "高锰酸盐", standard: "6", isShow: true },
        { value: 7, label: "氨氮", standard: "1", isShow: true },
        { value: 8, label: "总磷", standard: "0.2", isShow: true },
        { value: 9, label: "总氮", standard: "", isShow: true }
      ],
    };
  },
  created() {
    this.$store.commit("setShowlefttree", false);
  },
  methods: {
    indexMethod(index) {
      return index + 1;
    },
    search() {
     
    },
    closess(done) {
      done();
    },
  }
};
</script>

<style scoped lang="less">
.dialog-layout{
     .layoutspan{
         width: 78px;
      }
}
</style>
